<template>
  <div id="container"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
import './Widgets/widgets.css';

// 设置cesium 静态资源路径
window.CESIUM_BASE_URL = '/';

// 天地图 官网申请的key https://console.tianditu.gov.cn/api/key
const webKey = '01fc395160d8eb3b82aefe65b2280e58';

Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDkwYWVhOS0wNzI5LTQ3OTEtOWFiMC1kY2M3MTFiM2I2NWQiLCJpZCI6MTkyNTU1LCJpYXQiOjE3MDY1MTM0MTh9.YAPVHr1d7PBuWayCXM9deCxKg3AbtsXUJiVpubVS3NY';

onMounted(async () => {
  // 地球视图，底图加载
  const viewer = new Cesium.Viewer('container', {
    //信息窗口
    infoBox: false,
  });

  //隐藏cesium Icon-logo
  viewer.cesiumWidget.creditContainer.style.display = 'none';

  // 定位到中国
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(104.06667, 30.66667, 5000000.0), // 中国的经纬度和高度
  });

  // geojson https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json
  // api https://cesium.com/learn/cesiumjs/ref-doc/GeoJsonDataSource.html?classFilter=geoj
  // 第一种写法
  // viewer.dataSources.add(
  //   Cesium.GeoJsonDataSource.load(
  //     'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',
  //     {
  //       stroke: Cesium.Color.HOTPINK,
  //       fill: Cesium.Color.PINK,
  //       strokeWidth: 3,
  //       markerSymbol: '?',
  //     }
  //   )
  // );

  // 第二种写法
  const goeData = Cesium.GeoJsonDataSource.load(
    'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',
    {
      // stroke: Cesium.Color.RED,
      // fill: Cesium.Color.SKYBLUE.withAlpha(0.5),
      // strokeWidth: 3,
      // markerSymbol: '?',
    }
  );
  goeData.then((dataSource) => {
    console.log(dataSource);
    viewer.dataSources.add(dataSource);

    const entities = dataSource.entities.values;
    entities.forEach((entity, i) => {
      // 自定义entity 的材质颜色
      entity.polygon.material = new Cesium.ColorMaterialProperty(
        Cesium.Color.fromRandom({
          alpha: 1,
        })
      );
      entity.polygon.outline = false; // 去掉多边形的边框线
      const randomNum = parseInt(Math.random() * 7);
      entity.polygon.extrudedHeight = 1000 * 60 * randomNum; // 多边形的厚度
    });
  });
});
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
#container {
  height: 94vh;
  width: 94vw;
}
</style>
